<template>
  <div class="preview-container">
    <el-link :underline="false" type="primary" @click="previewShow">预览 </el-link>
    <el-link type="primary" :underline="false" :disabled="testBaseData.chkState === 0 ? false : true">审核</el-link>
    <el-link type="primary" :underline="false" @click="changeInfo">修改</el-link>
    <el-link type="primary" :underline="false" @click="putaway">{{ putaways === true ? '上架' : '下架 ' }}</el-link>
    <el-link type="primary" :underline="false" @click="delHandpick">删除</el-link>
    <!-- 预览弹出框 -->
    <el-dialog :modal="false" title="题目预览" :visible.sync="dialogVisible" width="70%" :before-close="handleClose" @closed="closeDia">
      <!-- 第一行 -->
      <el-row class="rowsOne">
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content bg-purple" v-if="testBaseData.questionType === '1'">
              <span>【题型】: 单选题</span>
            </div>
            <div class="grid-content bg-purple" v-else-if="testBaseData.questionType === '2'">
              <span>【题型】: 多选题</span>
            </div>
            <div class="grid-content bg-purple" v-else>
              <span>【题型】: 简单</span>
            </div>
          </el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <span>【编号】:{{ testBaseData.id }}</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <span>【难度】: {{ testBaseData.difficulty === '1' ? '简单' : testBaseData.difficulty === '2' ? '一般' : '困难' }}</span>
            </div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <span>【标签】: {{ testBaseData.tags }}</span>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"
            ><div class="grid-content bg-purple">【学科】: {{ testBaseData.subject }}</div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">【目录】: {{ testBaseData.catalog }}</div></el-col
          >
          <el-col :span="6"
            ><div class="grid-content bg-purple">【方向】: {{ testBaseData.direction }}</div></el-col
          >
        </el-row>
      </el-row>
      <!-- 第二行 -->
      <el-row class="rowsOne" type="flex">
        <el-col :span="8">
          <span>【题干】:</span>
          <div>{{ testBaseData.questionType === '1' ? '单选' : testBaseData.questionType === '2' ? '多选' : '简单' }} 选项：（以下选中的选项为正确答案）</div>
          <div class="radioBox">
            <p class="color" v-html="testBaseData.question"></p>
            <el-radio v-model="radio" label="1">北京</el-radio>
            <el-radio v-model="radio" label="1">天津</el-radio>
            <el-radio v-model="radio" label="1">上海</el-radio>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row class="rowsOne" type="flex">
        <el-col :span="8">
          <span>【参考答案】：</span>
          <el-button type="danger" size="mini" @click="answerVedio">视频答案预览 </el-button>
          <!-- 视频插件 -->
          <video-player v-if="vedioShow === true" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" id="video"> </video-player>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row class="rowsOne" type="flex">
        <el-col :span="8">
          <span>【答案解析】：<span v-html="testBaseData.answer"></span></span>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row class="rowsOne" type="flex">
        <el-col :span="8">
          <span>【题目备注】：<span v-html="testBaseData.remarks"></span></span>
        </el-col>
      </el-row>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"> 关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
// 删除
// import { delSift } from '../../../../api/components/component'
// 引入传值文件
import bus from '../brotherByValue'
export default {
  props: {
    // 接受父组件数据
    testBaseData: {
      type: Object,
      required: true
    }
  },
  components: {
    videoPlayer
  },
  name: 'preview',
  data() {
    return {
      putaways: true,
      // 弹出框默认状态
      dialogVisible: false,
      // 视频插件配置
      playerOptions: {
        // 播放速度
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始
        loop: false,
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // src: "//path/to/video.mp4", // 路径
            src: ' ', // 路径
            type: 'video/mp4' // 类型
          },
          {
            src: '',
            type: 'video/webm'
          }
        ],
        // poster: "../../static/images/test.jpg", //你的封面地址
        poster: '',

        // width: document.documentElement.clientWidth,
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true
        }
      },
      radio: '',
      // 视频插件默认状态
      vedioShow: false
    }
  },
  methods: {
    changeInfo() {
      this.$router.push(`/questions/new?id=${this.testBaseData.id}`)
      console.log(this.testBaseData)
    },
    closeDia() {
      // 监听弹出框关闭事件
      this.vedioShow = false
    },
    // 点击视频按钮切换
    answerVedio() {
      this.vedioShow = !this.vedioShow
    },
    // 点击预览控制弹出框状态
    previewShow() {
      this.dialogVisible = true
    },
    // 关闭弹出框触发
    handleClose() {
      this.dialogVisible = false
    },
    // 移除精选
    async delHandpick() {
      var present = await this.$confirm('确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (present !== 'confirm') return this.$message.info('取消删除成功!')
      // 向兄弟发送通知
      bus.$emit('del')
      this.$message({ type: 'success', message: '删除成功' })
    },
    // 上架
    putaway() {
      // 向兄弟通知
      this.putaways = !this.putaways
      if (this.putaways) {
        this.$message.success('下架成功')
      } else {
        this.$message.success('上架成功')
      }
    }
  },
  created() {
    this.playerOptions.sources[0].src = this.testBaseData.videoURL
  }
}
</script>

<style lang="less" scoped>
.preview-container {
  .color {
    color: skyblue;
  }
  .el-link {
    font-size: 13px;
    margin-right: 4px;
  }
  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      text-align: left;
      background-color: #0ca7fa;
      .el-dialog__title {
        color: white;
      }
    }
  }
  .rowsOne {
    .radioBox {
      display: flex;
      flex-direction: column;
      .el-radio {
        margin-top: 8px;
      }
    }
    .el-col {
      text-align: left;
      font-size: 14px;
      font-weight: 500;
      margin-top: 17px;
    }
    padding-bottom: 30px;
    border-bottom: 1px solid black;
    .video-player {
      width: 400px;
      height: 300px;
    }
    .el-row {
      .el-col {
        text-align: left;
      }
    }
  }
}
</style>
